<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Get Delegations By User | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Get Delegations By User" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="View the vesting delegations made by a user as well as the delegations that are expiring." />
<meta property="og:description" content="View the vesting delegations made by a user as well as the delegations that are expiring." />
<link rel="canonical" href="get_delegations_by_user.html" />
<meta property="og:url" content="get_delegations_by_user.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"View the vesting delegations made by a user as well as the delegations that are expiring.","mainEntityOfPage":{"@type":"WebPage","@id":"get_delegations_by_user.html"},"@type":"BlogPosting","url":"get_delegations_by_user.html","headline":"JS: Get Delegations By User","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-get-delegations-by-user" class="row tutorials-javascript-get-delegations-by-user">
	<h3>
		<a id="tutorials-javascript-get-delegations-by-user">
			JS: Get Delegations By User
			
		</a>
	</h3>
	
		<span class="description"><p><em>View the vesting delegations made by a user as well as the delegations that are expiring.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/29_get_delegations_by_user">Get Delegations By User</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of calling delegation information from the steem blockchain using the <code class="highlighter-rouge">database API</code>. The account information provided has been chosen by random and the process is applicable to any user account on both the <code class="highlighter-rouge">production server</code> and the <code class="highlighter-rouge">testnet</code>.</p>

<h2 id="intro">Intro</h2>

<p>This tutorial has two separate functions, one for viewing active delegations and one for viewing expiring delegations. Both of these use the <code class="highlighter-rouge">database API</code> to pull information from the steem blockchain. It should be noted that when a delegation is cancelled it will only be available after 7 days. The value of the delegation can also be changed at any time, either decreased or increased. The first function we use is <code class="highlighter-rouge">getVestingDelegations</code> for which we require the following parameters:</p>

<ol>
  <li><em>account</em> - The username for which the query is done</li>
  <li><em>from</em> - The value from where to start the search. This can be used for paging. This parameter is optional</li>
  <li><em>limit</em> - The quantity of results that is queried from the blockchain. This parameter is optional</li>
</ol>

<p>The second function is <code class="highlighter-rouge">getExpiringVestingDelegations</code> with parameters:</p>

<ol>
  <li><em>user</em> - The account that the query is referencing</li>
  <li><em>from time</em> - The date from where the query will be run. Pending expirations clear after 7 days so it will never be older than that. This value can however be set to anytime before the 7 days of expiration and it will return the relevant transactions</li>
  <li><em>limit</em> - The quantity of results that is queried from the blockchain</li>
</ol>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#connection"><strong>Configure connection</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to communicate with a Steem blockchain</li>
  <li><a href="#input"><strong>Input variables</strong></a> Collecting the required inputs via an HTML UI</li>
  <li><a href="#query"><strong>Database query</strong></a> Sending a query to the blockchain for the user delegations</li>
  <li><a href="#display"><strong>Display results</strong></a> Display the results of the blockchain query</li>
</ol>

<h4 id="1-configure-connection">1. Configure connection<a name="connection"></a></h4>

<p>As usual, we have a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//define network parameters</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">STM</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="dl">'</span><span class="s1">0000000000000000000000000000000000000000000000000000000000000000</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">//connect to a steem node, production in this case</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.steemit.com</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the production network with the proper chainId, addressPrefix, and endpoint.</p>

<h4 id="2-input-variables">2. Input variables<a name="input"></a></h4>

<p>The required parameters for the delegation query operation is recorded via an HTML UI that can be found in the <code class="highlighter-rouge">public/index.html</code> file. The values are pre-populated in this case but any account name can be used.</p>

<p>Both of the query functions use the same input variables. The previous results are cleared each time at the start of the function. The parameter values are allocated as seen below, once the user clicks on either the “Display active delegations” or “Display expiring delegations” button.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//active delegations function</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">createList</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">//clear list</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">delegationList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span>

    <span class="c1">//get username</span>
    <span class="kd">const</span> <span class="nx">delegator</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
</code></pre></div></div>

<h4 id="3-database-query">3. Database query<a name="query"></a></h4>

<p>The queries are sent through to the steem blockchain using the <code class="highlighter-rouge">database API</code> and parameters as per the <code class="highlighter-rouge">intro</code>. The result of the query is displayed on the console as a control check.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//active delegations function</span>
<span class="nx">delegationdata</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">getVestingDelegations</span><span class="p">(</span><span class="nx">delegator</span><span class="p">,</span> <span class="dl">""</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">delegationdata</span><span class="p">));</span>
</code></pre></div></div>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//expiring delegations function</span>
<span class="kd">const</span> <span class="nx">delegationdata</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">get_expiring_vesting_delegations</span><span class="dl">'</span><span class="p">,[</span><span class="nx">delegator</span><span class="p">,</span> <span class="dl">"</span><span class="s2">2018-01-01T00:00:00</span><span class="dl">"</span><span class="p">,</span> <span class="mi">100</span><span class="p">]);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">delegationdata</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="4-display-results">4. Display results<a name="display"></a></h4>

<p>Before the results are displayed a check is done whether there are in fact any transactions for the specific user.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//active delegations function</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">delegationdata</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">No delegation information</span><span class="dl">'</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-danger</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">No delegation information</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Active Delegations</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//expiring delegations function</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">delegationdata</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">No delegation information</span><span class="dl">'</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-danger</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">No delegation information</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResultContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">searchResult</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Expiring Delegations</span><span class="dl">'</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>The result from the query is an array of objects. The results are displayed in a simple list.</p>

<p>The active delegations functions returns the following values and are displayed on the UI as per below.</p>

<ol>
  <li>delegator - The user that made the delegation</li>
  <li>delegatee - The user that the delegations has been made to</li>
  <li>vesting_shares - The amount of VESTS that has been delegated</li>
  <li>min_delegation_time - The time from which the delegation will be active</li>
</ol>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//active delegations function</span>
<span class="nx">delegationdata</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">newObj</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">name</span> <span class="o">=</span> <span class="nx">newObj</span><span class="p">.</span><span class="nx">delegatee</span><span class="p">;</span>
    <span class="nx">shares</span> <span class="o">=</span> <span class="nx">newObj</span><span class="p">.</span><span class="nx">vesting_shares</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">delegationList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">+=</span>
        <span class="nx">delegator</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> delegated </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">shares</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> to </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">name</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&lt;br&gt;</span><span class="dl">'</span><span class="p">;</span>
<span class="p">});</span>
</code></pre></div></div>

<p>The expiring delegations function returns the following values and are displayed on the UI as per below.</p>

<ol>
  <li>vesting_shares - The amount of VESTS that is pending expiration</li>
  <li>expiration - The date at which the delegation will expire and the VESTS will be available again</li>
</ol>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//expiring delegations function</span>
<span class="nx">delegationdata</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">newObj</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">shares</span> <span class="o">=</span> <span class="nx">newObj</span><span class="p">.</span><span class="nx">vesting_shares</span><span class="p">;</span>
    <span class="nx">date</span> <span class="o">=</span> <span class="nx">expiration</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">delegationList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">+=</span>
        <span class="nx">shares</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> will be released at </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">date</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">&lt;br&gt;</span><span class="dl">'</span><span class="p">;</span>
<span class="p">});</span>
</code></pre></div></div>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/27_get_delegations_by_user</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at http://localhost:3000/</li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

